<template>
  <view class="nav-bar-container" :style="{height:navHeight+'px'}">
    <view class="main-container"
      :style="{paddingTop:statusBarHeight+'px',height:navHeight+'px',backgroundColor:background}">
      <view class="icon-container" @click="handleBack" v-if="back">
        <uni-icons custom-prefix="iconfont" type="icon-back" :color="color" size="48rpx" v-if="!backToHome">
        </uni-icons>
        <uni-icons custom-prefix="iconfont" type="icon-home" :color="color" size="48rpx" v-else>
        </uni-icons>
      </view>
      <view class="title-container" :class="{'title-container-not-back':!back}">
        <!-- 存在插槽的情况下 显示插槽内容 -->
        <view class="slot-container"
          :style="{'padding-right':'calc('+PaddingRight+'px + 20rpx)',height:titleBarHeight+'px','justify-content':textAlign}"
          v-if="$slots.default">
          <slot></slot>
        </view>
        <view v-else class="slot-container"
          :style="{'padding-right':PaddingRightComputed,height:titleBarHeight+'px','justify-content':textAlign}">
          <!-- 默认为显示标题 -->
          <text :style="{color:color}">{{title}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "nav-bar",
    props: {
      //是否存在返回
      back: {
        type: Boolean,
        default: true
      },
      // 导航栏标题
      title: {
        type: String,
        default: ""
      },
      // 导航栏标题颜色
      color: {
        type: String,
        default: "#666666"
      },
      // 导航栏背景色
      background: {
        type: String,
        default: "#eef2f4"
      },
      textAlign: {
        type: String,
        default: "flex-start"
      }

    },
    data() {
      return {
        statusBarHeight: 0,
        titleBarHeight: 0,
        navHeight: 0,
        PaddingRight: 0,
        PaddingRightNotMenu: 0,
        backToHome: false
      }
    },
    computed: {
      PaddingRightComputed() {
        if (this.back) {
          return 'calc(' + this.PaddingRightNotMenu + 'px + 88rpx +  20rpx)';
        }
        return '0px';
      }
    },
    mounted() {
      console.log("mounted");

      const SystemInfo = uni.getSystemInfoSync();
      let windowWidth = SystemInfo.windowWidth;
      // #ifdef H5
      this.statusBarHeight = 0;
      this.titleBarHeight = 45;
      this.navHeight = 45;

      // #endif
      // #ifdef MP-WEIXIN
      // 获取状态栏高度
      this.statusBarHeight = SystemInfo.statusBarHeight;
      // 获取胶囊按钮高度
      let MenuButtonBoundingClientRect = uni.getMenuButtonBoundingClientRect();
      console.log(MenuButtonBoundingClientRect);
      this.titleBarHeight = MenuButtonBoundingClientRect.height;
      let top = MenuButtonBoundingClientRect.top;
      // 
      let PaddingRight = windowWidth - MenuButtonBoundingClientRect.left;
      this.$set(this, 'PaddingRight', PaddingRight)
      let diff = (top - this.statusBarHeight) * 2;

      // 计算两者总和高度
      this.navHeight = this.statusBarHeight + diff + this.titleBarHeight;
      // #endif

      this.$emit('load', {
        navHeight: this.navHeight,
        height: SystemInfo.windowHeight
      })
      // 判断页面栈堆
      const pages = getCurrentPages()
      if (pages.length == 1) {
        // 有返回
        this.backToHome = true
      }
    },

    methods: {
      // 返回方法
      handleBack() {
        const pages = getCurrentPages()
        if (pages.length == 1) {
          uni.switchTab({
            url: "/pages/my/my"
          })
        } else {
          uni.navigateBack();
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  // 导航栏
  .nav-bar-container {
    width: 100%;
    position: relative;
    z-index: 999;

    .main-container {
      width: 100%;
      max-width: 750px;
      display: flex;
      align-items: center;
      position: fixed;
      left: var(--window-left);
      top: 0;
      box-sizing: border-box;

      .icon-container {
        height: 100%;
        width: 88rpx;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        box-sizing: border-box;
      }

      .title-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 36rpx;
        box-sizing: border-box;

        .slot-container {
          width: 100%;
          box-sizing: border-box;
          display: flex;
          align-items: center;
        }
      }

      .title-container-not-back {
        padding-left: 20rpx;
      }

    }
  }
</style>